<template>
	<div>
		<BaseContainer>
			<aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig">
				<template v-slot:materialForm="{model,row}">
					<uploadPage v-bind="row" v-model="model[row.prop]" :onlyReady="true"/>
				</template>
				<template #representation="{ row }">
					<el-button type="primary" @click="applyReason(row, 'apply')">查看</el-button>
				</template>
				<template #approvalInfo="{ row }">
					<el-button v-if="row.approvalStatus == 1" type="primary" @click="applyReason(row, 'approval')">查看</el-button>
					<span v-else>/</span>
				</template>
			</aplid-base-crud>
		</BaseContainer>
		<el-dialog v-model="visible" :title="title" width="60%">
			<DetailPage v-bind="config" :model="rowData" style="width: 100%; margin: 0 auto"></DetailPage>
		</el-dialog>
	</div>
</template>

<script setup>
import { baseConfig } from './config'
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import uploadPage from '@/components/AplidCrud/src/AplidUpload/index.vue'
const crud = ref(null)
const visible = ref(false)
const rowData = ref()
const title = ref()
const config = ref()
const applyReason = (row, type) => {
	if(type == 'apply') {
		title.value = '提交原因'
		config.value = config1
	} else {
		title.value = '驳回原因'
		config.value = config2
	}
	rowData.value = row
	visible.value = true
}

const config1 = {
	inline: false,
	showBtn: true,
	labelPosition: 'top',
	labelWidth: '120px',
	column: [
		{
			label: '提交申请原因情况说明',
			prop: 'representation',
			span: 24,
		},
		{
			label: '证明材料',
			prop: 'material',
			custome: 'file',
			span: 24,
		},
	],
}
const config2 = {
	inline: false,
	showBtn: true,
	labelPosition: 'top',
	labelWidth: '120px',
	column: [
		{
			label: '驳回原因',
			prop: 'approvalInfo',
			span: 24,
		},
	],
}
</script>

<style lang="scss" scoped></style>
